import { fromEvent } from "rxjs";
import { debounceTime, tap, map, throttleTime } from "rxjs/operators";
import { getLogger, getCountingLogger, ts } from "../utils";

const log0 = getLogger("Purpose");
log0("Move your mouse to see throttle vs debouce");

const mousemove$ = fromEvent(document, "mousemove");

const log1 = getCountingLogger("original");
const log2 = getCountingLogger("debounced");
const log3 = getCountingLogger("throttled");

mousemove$.pipe(
    map((e, idx) => [e, idx] as const),
    tap(() => log1(ts())),
    debounceTime(200),
    tap(() => log2(ts())),
).subscribe(console.log);

mousemove$.pipe(
    map((e, idx) => [e, idx] as const),
    tap(() => log1(ts())),
    throttleTime(200),
    tap(() => log3(ts())),
).subscribe(() => { });
